<template>
  <div class="bg-white max-w-screen-x1">
    <!-- 返回按钮 -->
    <div class="p-4">
      <button @click="goBack">
        <i class="fa fa-arrow-left text-lg"></i>
      </button>
    </div>

    <!-- 注册表单 -->
    <div class="px-6 mt-10">
      <h2 class="text-2xl font-bold text-center mb-8">注册</h2>

      <div class="space-y-4">
        <div>
          <input
              type="text"
              v-model="username"
              placeholder="请输入用户名"
              class="w-full py-3 px-4 border-b border-gray-300 focus:outline-none focus:border-primary-500"
          >
        </div>
        <div>
          <input
              type="tel"
              v-model="phone"
              placeholder="请输入手机号"
              class="w-full py-3 px-4 border-b border-gray-300 focus:outline-none focus:border-primary-500"
          >
        </div>
        <div>
          <input
              type="password"
              v-model="password"
              placeholder="请设置密码"
              class="w-full py-3 px-4 border-b border-gray-300 focus:outline-none focus:border-primary-500"
          >
        </div>
        <div>
          <input
              type="password"
              v-model="confirmPassword"
              placeholder="请再次输入密码"
              class="w-full py-3 px-4 border-b border-gray-300 focus:outline-none focus:border-primary-500"
          >
        </div>
        <div>
          <div class="flex items-center">
            <input type="radio" id="male" name="gender" value="male" v-model="gender" class="mr-2">
            <label for="male">男</label>
            <input type="radio" id="female" name="gender" value="female" v-model="gender" class="ml-6 mr-2">
            <label for="female">女</label>
          </div>
        </div>
        <div class="flex items-center mt-2">
          <input type="checkbox" class="mr-1" v-model="agreeTerms">
          <span class="text-sm text-gray-500">我已阅读并同意<a href="#" class="text-primary-500">用户协议</a>和<a href="#" class="text-primary-500">隐私政策</a></span>
        </div>
        <button
            class="w-full py-3 bg-primary-500 text-white rounded-full font-medium mt-6"
            @click="handleRegister"
            :disabled="!agreeTerms"
            :class="{ 'opacity-50 cursor-not-allowed': !agreeTerms }"
        >
          注册
        </button>
        <div class="text-center mt-4">
          <span class="text-gray-500">已有账号?</span>
          <a href="#" class="text-primary-500 ml-1" @click="goToLogin">立即登录</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 表单数据
const username = ref('')
const phone = ref('')
const password = ref('')
const confirmPassword = ref('')
const gender = ref('male')
const agreeTerms = ref(false)

// 返回上一页
const goBack = () => {
  router.go(-1)
}

// 跳转到登录页面
const goToLogin = () => {
  router.push({ name: 'Login' })
}

// 处理注册
const handleRegister = () => {
  if (!username.value || !phone.value || !password.value || !confirmPassword.value) {
    alert('请填写完整信息')
    return
  }

  if (password.value !== confirmPassword.value) {
    alert('两次输入的密码不一致')
    return
  }

  if (!agreeTerms.value) {
    alert('请同意用户协议和隐私政策')
    return
  }

  // 模拟注册成功
  alert('注册成功，请登录')
  router.push({ name: 'Login' })
}
</script>